import React, { useEffect, useState, useRef } from "react"
import { View, Text, Image, Swiper, SwiperItem, Video, Navigator } from "@tarojs/components"
import "@@/pages/index/index.scss"
import service from "@@/services/data.service"
import { activityIntro, activityIntroDetail, partnerList, menubarType } from "@@/interfaces/api.interface"
import proxy from "../../../config/proxy"
import moment from "moment"
const TitleAndLine = (props: { title: string }) => {
    return (
        <View className="titleBox">
            <View className="title">{props.title}</View>
            {/* <View className="line"></View> */}
        </View>
    )
}

const IndexPage = ({ exhibitionId }: { exhibitionId: number | undefined }) => {
    const [actCurrent, setActCurrent] = useState(0)
    const [actIntroList, setActIntroList] = useState<activityIntro[]>([])
    const [actInfo, setActInfo] = useState<activityIntroDetail>()
    useEffect(() => {
        if (exhibitionId) {
            // 活动介绍详情
            service.getProcess({ exhibitionId }).then(rslt => {
                const compleFun = (i: number): string => {
                    let cur
                    if (i < rslt.data.length - 1 && rslt.data[i + 1].image) {
                        cur = rslt.data[i + 1].image
                    } else if (i > 1 && rslt.data[i - 1].image) {
                        cur = rslt.data[i - 1].image
                    } else {
                        cur = compleFun(i + 1)
                    }
                    return cur || rslt.data[i].image
                }
                //图片补全
                rslt.data.forEach((item, index) => {
                    if (!item.image) {
                        rslt.data[index].image = compleFun(index)
                    }
                })
                // console.log(rslt.data)
                setActIntroList(rslt.data)
            })
            //  活动介绍列表
            service.getInfo({ id: exhibitionId }).then(rslt => {
                setActInfo(rslt.data)
            })
        }
    }, [])

    const changeIntroSwipe = e => {
        if (e.detail.source == "touch") {
            setActCurrent(e.detail.current)
        }
    }
    const changeActSwipe = (type: string) => () => {
        // console.log(type, actCurrent, actCurrent > 0, actCurrent < actIntroList.length, actIntroList.length)
        let cur
        if (type === "decrease") {
            cur = actCurrent - 1
        } else if (type === "increase") {
            cur = actCurrent + 1
        }
        if (cur >= 0 && cur < actIntroList.length) {
            setActCurrent(cur)
        }
    }
    // const date_transfrom = (date: string) => {
    //     let h = new Date(date).getHours()
    //     let newH = h < 10 ? `0${h}` : `${h}`
    //     let m = new Date(date).getMinutes()
    //     let newM = m < 10 ? `0${m}` : `${m}`
    //     return `${newH}:${newM}`
    // }
    // console.log(!!actIntroList.length, actInfo, "!!actIntroList.length && actInfo")
    return <View>
        {
            !!actIntroList.length && actInfo && <View className="partBox">
                <TitleAndLine title="活动介绍" />
                <View className="actinfo-detail">
                    <View className="detailBox long">
                        <View className="detailTitle">活动名称/</View>
                        <View className="detailText">{actInfo?.title}</View>
                    </View>
                    <View className="detailBox">
                        <View className="detailTitle">活动时间/</View>
                        <View className="detailText">{actInfo?.startTime}</View>
                    </View>
                    <View className="detailBox">
                        <View className="detailTitle">活动地点/</View>
                        <View className="detailText">{actInfo?.address}</View>
                    </View>
                    <View className="detailBox long">
                        <View className="detailTitle ">活动介绍/</View>
                        <View className="detailText">{actInfo?.remarks}</View>
                    </View>
                </View>

                <Swiper className="activityBox" onChange={changeIntroSwipe} current={actCurrent}>
                    {actIntroList.map(item => {
                        return (
                            <SwiperItem key={item.id}>
                                <View className="activityImgBox">
                                    <Image className="activityImg" src={`${proxy.sourceUrl}/${item.image}`}></Image>
                                </View>
                                <View className="timeBox">
                                    <View className="date">{moment(item.startTime).format("YYYY-MM-DD")}</View>
                                    <View className="time">
                                        {moment(item.startTime).format("HH:mm:ss")}-  {moment(item.endTime).format("HH:mm:ss")}
                                        {/* {date_transfrom(item.startTime)}-{date_transfrom(item.endTime)} */}
                                    </View>
                                </View>
                                <View className={"content"}>{item.content}</View>
                            </SwiperItem>
                        )
                    })}
                </Swiper>

                <View className="swiperLeft" onClick={changeActSwipe("decrease")}>
                    <Image mode="aspectFit" src={require("@@/assets/img/swiperArrowsL.png")}></Image>
                </View>
                <View className="swiperRight" onClick={changeActSwipe("increase")}>
                    <Image mode="aspectFit" src={require("@@/assets/img/swiperArrowsR.png")}></Image>
                </View>
            </View>
        }
    </View>
}

export default IndexPage